<template>
    <div class="singer">
        <h2>歌手</h2>
        <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
            <li v-for="item in singerUrl" :key="item.singer_mid" @click="selectPlayList(item)">
                <div class="cover_num">
                    <img :src="item.singer_pic" alt="">
                </div>
                <span>{{item.singer_name}}</span>
            </li>
        </ul>
        </div>
    </div>
</template>
<script>
import BScroll from "better-scroll";
import axios from 'axios'
export default {
    data(){
        return{
            singerUrl:[],
            liuyandata:[],
        };
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            axios.get("/api/singer/list","")
            .then(res => {
                console.log(res.data.data.list)
                this.singerUrl=res.data.data.list
                this.betterScrollHorizontal(this.singerUrl.length,109)
            })
            .catch(err => {
                console.error(err); 
            })
        },
        selectPlayList(item){
            const id = item.singer_mid
            this.$router.push({path:`/singer/${id}`})
            this.$store.commit('setLiuyan',item)
        },
        betterScrollHorizontal(num,itemWidth){

            let width =itemWidth * (Math.ceil(num /3));
            this.$refs.content.style.width=width +"px";
            this.$nextTick(()=>{
                this.scroll =new BScroll(this.$refs.wrapper,{
                    click:true,
                    startX:0,
                    scrollX:true,//水平横向
                    scrollY:false
                })
            });
        }
    }
}
</script>

<style scoped>
.singer{
   width: 90%;
    margin: 0 auto;
}
.content>h2{
    font-size: 20px;
    text-align: left;
}
.wrapper {
  overflow-y: scroll;/**超出部分隐藏*/
  margin: 0 auto;
  width: 100%;
}
ul{
        text-align: left;
}
ul.content > li {
  display: inline-block;
  width: 109px;/**宽度需要 */
  vertical-align: top;
  text-align: center;
}
ul.content > li img{
    width: 90%;
    border-radius: 20px;/**圆角 */
}
.cover-num{
    position: relative;/**绝对定位 */
}
.cover-num>span{
    position: absolute;
    right: 10px;
    bottom: 3px;
    z-index: 100;
    background-color: #856d72;
    border-radius: 20px;
    width: 81px;
}
.singer>h2{
    font-size: 20px;
    text-align: left;
}
</style>